<template>
	<view class="home">
		<custom-navbar title="教育经历" :show-back="true" @back="handleBack" />

		<view class="content p30" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 加载状态 -->
			<up-loading-icon v-if="loading" mode="circle" size="40"></up-loading-icon>

			<!-- 教育经历列表 -->
			<view class="mt30" v-if="!loading && educationList.length > 0">
				<view class="item p4030 mb20" v-for="(item, index) in educationList" :key="item.id">
					<view class="fcsb mb18">
						<view class="f30bc0">{{ item.content.school || '未填写学校' }} · {{ item.content.major || '未填写专业' }}
						</view>
						<view class="fc" @click="handleEdit(item)">
							<view class="f24c6">更新资历</view>
							<image class="wh24 ml5" src="/static/images/home/Frame(2).svg"></image>
						</view>
					</view>
					<view class="f225c0 mb30">
						{{ item.content.education || '未填写学历' }} ·
						{{ item.content.startTime }}-{{ item.content.endTime }}
					</view>
					<up-line></up-line>
					<view class="f245c3 mt18">
						内容介绍：{{ item.content.description || '暂无内容介绍' }}
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<!-- <up-empty v-if="!loading && educationList.length === 0" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无教育经历"></up-empty -->

			<!-- 底部按钮 -->
			<view class="btn">
				<up-button @click="handleAddEducation" customStyle="width: 100%;">
					<image class="wh28 ml5" src="/static/images/resume/添加.svg"></image>
					<view class="ml10 f245c3">添加我的教育经历</view>
				</up-button>
				<up-button type="primary" color="linear-gradient(90deg, #398DFB 0%, #61DBFF 100%)" text="更新我的简历"
					:loading="submitting" @click="handleSubmit"
					customStyle="border-radius:10rpx;margin-top:20rpx;"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		talendList
	} from '@/api/talents'

	// 系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 数据状态
	const loading = ref(true)
	const submitting = ref(false)
	const educationList = ref([])

	// 获取教育经历列表
	const fetchEducationList = async () => {
		try {
			loading.value = true
			const res = await talendList(1) // type=1表示教育经历
			if (res.code === 200) {
				educationList.value = res.data.data || []
			}
		} catch (error) {
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	// 编辑教育经历
	const handleEdit = (item) => {
		// 存储到本地缓存
		uni.setStorage({
			key: 'currentEducationData', // 存储的键名
			data: item.content, // 存储的数据（教育经历详情）
			success: () => {
				console.log('教育经历数据已存储到本地')
				// 跳转到编辑页
				uni.navigateTo({
					url: `/pages/resume/AddEducation?id=${item.id}`
				})
			},
			fail: (err) => {
				console.error('存储失败:', err)
				uni.showToast({
					title: '数据存储失败',
					icon: 'none'
				})
			}
		})
	}

	// 添加教育经历
	const handleAddEducation = () => {
		uni.navigateTo({
			url: '/pages/resume/AddEducation'
		})
	}

	// 提交更新
	const handleSubmit = async () => {
		submitting.value = true
		try {
			await fetchEducationList() // 重新获取最新数据
			uni.showToast({
				title: '更新成功',
				icon: 'success'
			})
		} catch (error) {
			uni.showToast({
				title: '更新失败',
				icon: 'none'
			})
		} finally {
			submitting.value = false
		}
	}

	// 返回
	const handleBack = () => {
		uni.navigateBack()
	}

	onMounted(() => {
		fetchEducationList()
	})
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			display: flex;
			flex-direction: column;
			position: relative;
			padding-bottom: 160rpx;
			/* 给底部按钮留空间 */

			.item {
				width: 100%;
				min-height: 300rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 40rpx 30rpx;
				margin-bottom: 20rpx;
			}

			.btn {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 20rpx 30rpx;
				background: #fff;
				z-index: 10;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
			}
		}
	}
</style>